<template>
<a-spin :spinning="spinning" tip="加载中...">
  <a-card :bordered="false">
    <h3 style="margin-bottom: 20px;">{{id ? '编辑' : '新增'}}账号</h3>
    <a-form-model
      ref="rulesForm"
      :model="form"
      :rules="rules"
      :labelCol="{ lg: { span: 5 }, sm: { span: 7 } }"
      :wrapperCol="{ lg: { span: 16 }, sm: { span: 17 } }"
    >
     <a-form-model-item label="昵称" prop="userNickname">
        <a-input
          v-model="form.userNickname"
          :maxLength="24"
        />
        <div>限24个字符以内</div>
      </a-form-model-item>
      <a-form-model-item label="头像" required>
        <JImageUpload :isMove="false" :uploadParams="getUploadParams()" :isMultiple="false" :fileSize="1" :number="1" :accept="'image/*'" @fileChange="fileImageChange" v-model="imgList"></JImageUpload>
        <div>200-200px，支持PNG, JPG和GIF格式，大小不超过1M</div>
      </a-form-model-item>
      <a-form-model-item label="身份标识" prop="identityId">
        <a-select v-model="form.identityId" @change="onIdentityIdChange" placeholder="请选择" show-search :filter-option="filterOption">
          <a-select-option v-for="item in identityList" :disabled="item.id == 2 " :value="item.id" :key="item.id">{{ item.identityName }}</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="账号状态" prop="status">
        <a-radio-group v-model="form.status">
          <a-radio value="0">正常</a-radio>
          <a-radio value="1">禁用</a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="其他渠道是否可用" prop="isUse">
        <a-radio-group v-model="form.isUse">
          <a-radio value="0">是</a-radio>
          <a-radio value="1">否</a-radio>
        </a-radio-group>
        <div>注：设置该用户发布的内容是否支持其他渠道应用</div>
      </a-form-model-item>
      <a-form-model-item label="简介" prop="introduction">
        <a-textarea
          v-model="form.introduction"
          :rows="4"
          :maxLength="60"
        />
        <div>限60个字符以内</div>
      </a-form-model-item>
      <a-form-model-item :wrapperCol="{ span: 24 }" style="text-align: center">
        <a-button htmlType="submit" @click="handleSubmit" type="primary" >保存</a-button>
      </a-form-model-item>
    </a-form-model>
  </a-card>
  </a-spin>
</template>
<script>
  import JImageUpload from '../../components/JImageUpload'
  import { userAdd, identityList } from '@/api/micromall/communityUser'
  export default {
    components: {
      JImageUpload
    },
    data() {
      return {
        identityList: [],
        spinning: false,
        id: '',
        identityName: '',
        form: {
          status: '1',
          identityId: 1,
          isUse: '0'
        },
        imgList: [],
        rules: {
          userNickname: [
            { required: true, message: '请输入', trigger: 'blur' }
          ],
          status: [
            { required: true, message: '请选择', trigger: 'change' }
          ],
          introduction: [
            { required: true, message: '请输入', trigger: 'blur' }
          ],
          identityId: [
            { required: true, message: '请选择', trigger: 'change' }
          ],
          isUse: [{ required: true, message: '请选择', trigger: 'change' }]
        }
      }
    },
    created() {
      this.getDetails()
      this.getIdentityList()
    },
    computed: {
    },
    mounted() {
    },
    methods: {

    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },

    onIdentityIdChange() {
      if (this.id) return
      this.form.isUse = this.form.identityId == 1 ? '0' : '1'
    },

     // 获取身份标识
    getIdentityList() {
      identityList({}).then(res => {
        if (res.code === 200) {
          this.identityList = res.data
        } else {
          this.$message.error(res.msg)
        }
      })
    },

      // 获取详情
    getDetails() {
      if (this.$route.query.item == 'null') return
      const item = JSON.parse(decodeURIComponent(this.$route.query.item))
      const {id, headPortrait} = item
      this.id = id
      this.form = {
        ...item
      }
      this.imgList = [headPortrait]
    },

      getUploadParams() {
        return {
            actionUrl: 'https://jic.jnby.com/activity/market-act/common/upload/multipart',
            headers: {
              authorization: 'authorization-text'
            },
            uploadHost: 'https://img.bzhz.jnbygroup.com/'
          }
      },

      // 图片change
      fileImageChange(list) {
        this.form.headPortrait = list.length ? list[0].url : ''
      },

      // 保存
      handleSubmit() {
        this.$refs.rulesForm.validate(valid => {
          if (valid) {
            if (!this.form.headPortrait) {
              this.$message.error('请上传头像！')
              return
            }
            const data = {
              ...this.form,
              identityName: this.identityList.filter(e => e.id == this.form.identityId)[0].identityName
            }
            this.spinning = true
            userAdd(data).then(res => {
              if (res.code === 200) {
                this.$router.go(-1)
              } else {
                this.spinning = false
                this.$message.error(res.data.msg)
              }
            }).catch(err => {
              this.spinning = false
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        })
      }
    }
  }
</script>
<style lang="less" scoped>
</style>
